<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="req.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="
          req.pageIndex = 1
          getJobs()
        "
      >
        搜索
      </el-button>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="addVis = true"
      >
        添加
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table
          height="calc(100% - 40px)"
          :data="res.Items"
          stripe
          border
          highlight-current-row
          show-summary
        >
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column label="任务名称" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSJ_Name }}
            </template>
          </el-table-column>
          <el-table-column label="负责人" width="160px">
            <template slot-scope="scope">
              【{{ scope.row.USR_Name }}】 {{ scope.row.USR_Phone }}
            </template>
          </el-table-column>
          <el-table-column label="任务流程">
            <template slot-scope="scope">
              【{{ scope.row.JobBusinessName }}】 {{ scope.row.JobFlowName }}
            </template>
          </el-table-column>
          <el-table-column label="任务源" width="260">
            <template slot-scope="scope">
              <a
                @click="toForm(scope.row.CSJ_SourceFormID)"
                v-if="scope.row.SourceFlowName"
              >
                【{{ scope.row.SourceBusinessName }}】
                {{ scope.row.SourceFlowName }}
              </a>
            </template>
          </el-table-column>
          <el-table-column label="完成情况" width="180">
            <template slot-scope="scope">
              {{ scope.row.CSJ_IsDone ? '完成时间：' : '未完成' }}
              {{ scope.row.CSJ_DoneTime | formatDate }}
              <el-button
                type="text"
                size="small"
                @click="toForm(scope.row.CSJ_DoneFormID)"
                icon="el-icon-search"
                v-if="scope.row.CSJ_IsDone"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column label="任务期限" width="120">
            <template slot-scope="scope">
              {{ scope.row.CSJ_LimitTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CSJ_Remark }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="
                  curJob = scope.row
                  editVis = true
                "
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                @click="deleteJob(scope.row.CSJ_ID)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="req.pageIndex"
          :total="res.Total"
          :page-size="req.pageSize"
          :page-sizes="[10, 15, 20]"
          @size-change="
            (val) => {
              req.pageSize = val
              getJobs()
            }
          "
          @current-change="getJobs()"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="新增" :visible.sync="addVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="任务名称">
          <el-input v-model="newJob.CSJ_Name"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select filterable v-model="newJob.CSJ_EmpID" style="width: 300px">
            <el-option
              v-for="(item, index) in employees"
              :key="index"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务流程">
          <el-select
            filterable
            v-model="newJob.CSJ_FlowID"
            style="width: 300px"
          >
            <el-option
              v-for="(item, index) in flows"
              :key="index"
              :label="'[' + item.BF_Name + ']' + item.FLOW_Name"
              :value="item.FLOW_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作期限">
          <el-date-picker
            type="date"
            v-model="newJob.CSJ_LimitTime"
            placeholder="请输入工作期限"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="newJob.CSJ_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addJob()">新增</el-button>
          <el-button type="text" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curJob"
      >
        <el-form-item label="任务名称">
          <el-input v-model="curJob.CSJ_Name"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select filterable v-model="curJob.CSJ_EmpID" style="width: 300px">
            <el-option
              v-for="(item, index) in employees"
              :key="index"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务流程">
          <el-select
            filterable
            v-model="curJob.CSJ_FlowID"
            style="width: 300px"
          >
            <el-option
              v-for="(item, index) in flows"
              :key="index"
              :label="'[' + item.BF_Name + ']' + item.FLOW_Name"
              :value="item.FLOW_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作期限">
          <el-date-picker
            type="date"
            v-model="curJob.CSJ_LimitTime"
            placeholder="请输入工作期限"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curJob.CSJ_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editJob()">保存</el-button>
          <el-button type="text" @click="editVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getEmployees,
  getJobs,
  addJob,
  editJob,
  deleteJob,
  getFlows,
} from '@/api/core/caseJob'
export default {
  props: ['caseId'],
  data: function () {
    return {
      employees: [],
      flows: [],
      req: {
        type: null,
        caseId: null,
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
      },
      res: {
        Items: [],
        Total: 0,
      },
      newJob: {},
      curJob: null,
      addVis: false,
      editVis: false,
    }
  },
  methods: {
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    getEmployees() {
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    },
    getJobs() {
      this.req.caseId = this.caseId
      getJobs(this.req).then(({ data }) => {
        this.res = data
      })
    },
    getFlows() {
      getFlows().then(({ data }) => {
        this.flows = data
      })
    },
    addJob() {
      this.newJob.CSJ_CaseID = this.caseId
      addJob(this.newJob).then(() => {
        this.getJobs()
        this.addVis = false
      })
    },
    editJob() {
      editJob(this.curJob).then(() => {
        this.getJobs()
        this.editVis = false
      })
    },
    deleteJob(id) {
      this.$confirm(`是否删除该费用项目`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteJob(id).then(() => {
          this.getJobs()
        })
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getEmployees()
    this.getFlows()
    this.getJobs()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100%);
}
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
